<template>
  <div class="document">
    <div class="banner">
      <div class="Box">
        <span
          ><div id="u423"></div>
          完善居民档案</span
        >
        <!-- 分割线 -->
        <el-divider />
      </div>
      <!-- 第一排 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.user1" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="身份证号码">
          <el-input v-model="formInline.user2" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="formInline.user3" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <!-- 第二排 -->

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="现居住地">
          <el-input v-model="form.name1" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="行政区划">
          <el-input v-model="formInline.user4" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="户籍地址">
          <el-input v-model="form.name2" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <!-- 分割线 -->
      <el-divider />
      <!-- 第三排 -->

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="居民标签">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="请选择" value="请选择" />
            <el-option label="慢病护理" value="慢病护理" />
            <el-option label="高血压" value="高血压" />
            <el-option label="高血糖" value="高血糖" />
          </el-select>
        </el-form-item>

        <el-form-item label="籍贯">
          <el-input v-model="form.name3" placeholder="请输入" />
        </el-form-item>

        <!-- 选择日期 -->
        <el-form-item label="出生年月">
          <el-date-picker
            v-model="value"
            type="date"
            placeholder="选择日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          >
            <template #default="cell">
              <div class="cell" :class="{ current: cell.isCurrent }">
                <span class="text">{{ cell.text }}</span>
                <span v-if="isHoliday(cell)" class="holiday" />
              </div>
            </template>
          </el-date-picker>
        </el-form-item>
      </el-form>

      <!-- 第四排 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="性别">
          <el-select v-model="form.region1" placeholder="请选择">
            <el-option label="请选择" value="请选择" />
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>

        <el-form-item label="民族">
          <el-select v-model="form.region2" placeholder="请选择">
            <el-option label="请选择" value="请选择" />
            <el-option label="汉族" value="汉族" />
            <el-option label="回族" value="回族" />
            <el-option label="维吾尔族" value="维吾尔族" />
            <el-option label="壮族" value="壮族" />
            <el-option label="其他民族" value="其他民族" />
          </el-select>
        </el-form-item>

        <el-form-item label="文化程度">
          <el-select v-model="form.region3" placeholder="请选择">
            <el-option label="请选择" value="请选择" />
            <el-option label="小学" value="小学" />
            <el-option label="初中" value="初中" />
            <el-option label="高中/中专" value="高中/中专" />
            <el-option label="大专及以上" value="大专及以上" />
            <el-option label="不详" value="不详" />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 第五排 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="婚姻状况">
          <el-select v-model="form.region4" placeholder="请选择">
            <el-option label="请选择" value="请选择" />
            <el-option label="未婚" value="未婚" />
            <el-option label="已婚" value="已婚" />
            <el-option label="离异" value="离异" />
            <el-option label="丧偶" value="丧偶" />
            <el-option label="不详" value="不详" />
          </el-select>
        </el-form-item>

        <el-form-item label="职业">
          <el-input v-model="form.name4" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="工作单位">
          <el-input v-model="form.name5" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <!-- 第六排 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="紧急联系人">
          <el-input v-model="form.name6" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input v-model="form.name7" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="登陆密码">
          <el-input v-model="form.name8" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <!-- 分割线 -->
      <el-divider />

      <!-- 第七排 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="户籍类型">
          <el-select v-model="form.region5" placeholder="请选择">
            <el-option label="请选择" value="请选择" />
            <el-option label="城镇" value="城镇" />
            <el-option label="农村" value="农村" />
          </el-select>
        </el-form-item>

        <el-form-item label="定点医疗单位">
          <el-input v-model="formInline.user7" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <!-- 费用类型 -->
      <el-form-item label="费用类型">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="自费" name="type" />
          <el-checkbox label="社会医疗保险" name="type" />
          <el-checkbox label="商业保险" name="type" />
          <el-checkbox label="新农和合" name="type" />
          <el-checkbox label="其他" name="type" />
        </el-checkbox-group>
      </el-form-item>

      <!-- 分割线 -->
      <el-divider />

      <h4>健康信息</h4>

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="身高">
          <el-input v-model="formInline.user5" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="体重">
          <el-input v-model="formInline.user6" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="血型">
          <el-select v-model="form.region6" placeholder="请选择">
            <el-option label="请选择" value="请选择" />
            <el-option label="A型" value="A型" />
            <el-option label="B型" value="B型" />
            <el-option label="AB型" value="AB型" />
            <el-option label="O型" value="O型" />
            <el-option label="不详" value="不详" />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 分割线 -->
      <el-divider />

      <!-- 按钮 -->
      <el-row class="mb-4 btn">
        <el-button type="primary"  :plain="true" @click="open2">保存</el-button>
        <el-button @click="back">返回</el-button>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
import { ref } from "vue";
import { ElMessage } from 'element-plus'

// 点击跳窗
const open2 = () => {
  ElMessage({
    showClose: true,
    message: '保存成功.',
    type: 'success',
  })
}


// 返回主页功能
const router = useRouter();
const back = () => {
  router.push("/he");
};

// 选择日期
const value = ref("2021-10-29");
const holidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
];

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format("YYYY-MM-DD"));
};

// 单选框
const form = reactive({
  name: "",
  name1: "",
  name2: "",
  name3: "",
  name4: "",
  name5: "",
  name6: "",
  name7: "",
  name8: "",
  name9: "",
  region: "",
  region1: "",
  region2: "",
  region3: "",
  region4: "",
  region5: "",
  region6: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

// 填空框
const formInline = reactive({
  user1: "",
  user2: "",
  user3: "",
  user4: "",
  user5: "",
  user6: "",
  user7: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style>
.document {
  width: 100%;
  height: 100%;
}
.banner {
  width: 900px;
  height: 100%;
  margin: 0 auto;
}

#u423 {
  border-width: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  float: left;
  margin-left: 18px;
  margin-right: 18px;
}

.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}
.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.cell.current .text {
  background: #626aef;
  color: #fff;
}
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.btn {
  width: 100%;
  justify-content: center;
}
</style>
